<template>
  <div class="dashboard-container">
    <div class="top">
      <div class="topleft">
        <div class="left_up">
          <!-- 工单统计 -->
          <div class="order">
            <span class="title">工单统计</span>
            <span class="time">{{ month.start }}</span><span class="time">&nbsp;~&nbsp;</span><span class="time">{{ month.end }}</span>
            <div class="order_t">
              <div class="num">
                <span class="sum">{{ orderData.total }}</span>
                <p class="sumName">工单总数(个)</p>
              </div>
              <div class="num">
                <span class="sum">{{ orderData.completedTotal }}</span>
                <p class="sumName">完成工单(个)</p>
              </div>
              <div class="num">
                <span class="sum">{{ orderData.progressTotal }}</span>
                <p class="sumName">进行工单(个)</p>
              </div>
              <div class="num">
                <span class="sum">{{ orderData.cancelTotal }}</span>
                <p class="sumName">取消工单(个)</p>
              </div>
            </div>
          </div>
          <!-- 销售统计 -->
          <div class="sell">
            <span class="title">销售统计</span>
            <span class="time">{{ month.start }}</span><span class="time">&nbsp;~&nbsp;</span><span class="time">{{ month.end }}</span>
            <div class="sell_t">
              <div class="num">
                <span class="sum">{{ orderCount }}</span>
                <p class="sumName">订单量(个)</p>
              </div>
              <div class="num">
                <span class="sum">{{ sellCount }}</span>
                <p class="sumName">销售额(个)</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 数据可视化 -->
        <div class="left_under">
          <div class="under_top">
            <div class="left">
              <span class="title">销售数据</span>
              <span class="time">{{ start }}</span><span class="time">&nbsp;~&nbsp;</span><span class="time">{{ end }}</span>
            </div>
            <div class="right">
              <div class="week-month-year">
                <div
                  class="item"
                  :class="{ 'is-checked': istype === 'week' ? true : false }"
                  @click="changetype('week')"
                >
                  周
                </div>
                <div
                  class="item"
                  :class="{ 'is-checked': istype === 'month' ? true : false }"
                  @click="changetype('month')"
                >
                  月
                </div>
                <div
                  class="item"
                  :class="{ 'is-checked': istype === 'year' ? true : false }"
                  @click="changetype('year')"
                >
                  年
                </div>
              </div>
            </div>
          </div>

          <div class="center">
            <div ref="line" class="broken_line">折线图</div>
            <div ref="column" class="columnar">柱状图</div>
          </div>
        </div>
      </div>
      <!-- 商品热榜 -->
      <div class="topright">
        <div class="r_top">
          <span class="title">商品热榜</span>
          <!-- 时间根据 周 月 年 改变 -->
          <span class="time">{{ month.start }}</span><span class="time">&nbsp;~&nbsp;</span><span class="time">{{ month.end }}</span>
        </div>

        <div v-for="(item, index) in goodsList" :key="index" class="product">
          <div class="logo">{{ index + 1 }}</div>
          <span class="name">{{ item.skuName }}</span>
          <span class="number">{{ item.count }}单</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <!-- 合作商点位数Top5 -->
      <div class="bottom_left">
        <div class="left_top">
          <span class="title">合作商点位数Top5</span>
          <span
            class="more"
            @click="toPartner"
          ><i
            class="el-icon-more"
          /></span>
        </div>

        <div class="left_under">
          <!-- 饼图 -->
          <div ref="pie" class="pie" />
          <div class="sum_up">
            <span class="sum">{{ nodeCount }}</span>
            <p class="sumName">点位数</p>
            <span class="sum">{{ partnerCount }}</span>
            <p class="sumName">合作商数</p>
          </div>
        </div>
      </div>

      <!-- 异常设备监控 -->
      <div class="bottom_right">
        <div class="right_top">
          <span class="title">异常设备监控</span>
          <span class="more">···</span>
        </div>
        <div class="picture">
          <img
            src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          >
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import {
  getNodeCount,
  getPartnerCount,
  getPartnerNode,
  getTaskReportInfo,
  getOrderCount,
  getOrderAmount,
  getTopTenList,
  getSaleroom,
  getTotalSales
} from '@/api/lmdashboar'

import {
  getMonthnum,
  getMonth,
  getCurrentTimeRange,
  getYearnum
} from '@/utils/date'

export default {
  data() {
    return {
      istype: 'week',
      month: {}, // 起始日,无具体时间 点
      weeks: {}, // 当前周 杠
      year: {}, // 当前年
      monthTimeQ: {}, // 无具体时间 杠
      monthTime: {}, // 有具体时间
      start: '', // 销售数据的开始时间
      end: '', // 结束时间
      orderCount: '', // 销售统计 订单量
      sellCount: '', // 销售统计 销售额
      orderData: {
        // 工单统计
        total: 0,
        completedTotal: 0,
        progressTotal: 0,
        cancelTotal: 0
      },
      goodsList: [], // 前10
      lineObj: {},
      columnObj: {},
      pieObj: {},
      nodeCount: '', // 点位数
      partnerCount: '' // 合作商数
    }
  },
  watch: {
    // 折线图
    lineObj(value) {
      this.line.setOption({
        title: {
          left: 'center',
          text: '销售额趋势图',
          textStyle: {
            fontSize: 14
          }
        },
        // 出现提示的竖线
        tooltip: {
          trigger: 'axis',
          formatter: '{a} : {c} <br/> {b}',
          textStyle: {
            color: '#999',
            fontWeight: 'normal'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#ccc',
              width: 2,
              type: 'solid'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: value.xAxis
        },
        yAxis: [
          {
            name: '单位：元',
            type: 'value'
          },
          {
            type: 'value'
          }
        ],
        series: [
          {
            data: value.series,
            name: '销售额',
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'red'
            },
            symbolSize: 5 // 折线点的大小
          }
        ],
        grid: {
          top: 40,
          x: 40, // x轴距离左侧
          x2: 24, // x轴距离右侧
          y2: 40 // y轴距离底部
        }
      })
    },

    // 柱状图
    columnObj(value) {
      this.column.setOption({
        title: {
          left: 'center',
          text: '销售额分布',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          textStyle: {
            color: '#999',
            fontWeight: 'normal'
          },
          formatter: '{a} : {c} <br/> {b}'
        },
        xAxis: {
          type: 'category',
          data: value.xAxis,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: [
          {
            name: '单位：元',
            type: 'value'
          },
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售额',
            data: value.series,
            type: 'bar',
            barWidth: 18, // 设置柱的宽
            itemStyle: {
              normal: {
                // 设置 柱 圆角 [左上角，右上，右下，左下]
                barBorderRadius: [5, 5, 0, 0],
                color: '#91b0ff' // 柱 颜色
              }
            }
          }
        ],
        grid: {
          top: 40,
          x: 70, // x轴距离左侧
          x2: 24, // x轴距离右侧
          y2: 40 // y轴距离底部
        }
      })
    },

    // 饼图
    pieObj(value) {
      // console.log(value)
      this.pie.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>{a} : {d}%'
        },

        series: [
          {
            name: '总占比',
            type: 'pie',
            radius: [20, 70],
            center: ['48%', '50%'],
            data: value.sort(function(a, b) {
              return b.value - a.value
            }),
            roseType: 'radius',
            labelLine: {
              lineStyle: {
                color: '#d5d5d5'
              },
              length: 10,
              length2: 10
            },
            itemStyle: {
              normal: {
                color: function(colors) {
                  const colorList = [
                    '#85a7ff',
                    '#99ebbd',
                    '#ffb18b',
                    '#c6ebff',
                    '#becce6'
                  ]
                  return colorList[colors.dataIndex]
                }
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      })
    }
  },
  created() {
    this.getMath()
    this.getMathTime()
    this.getWeeks()
    this.getYear()

    this.$nextTick(() => {
      this.getOrderInfo()
    })

    this.$nextTick(() => {
      this.getOrderNum()
    })

    this.$nextTick(() => {
      this.getSellNum()
    })

    this.$nextTick(() => {
      this.getGoodsList()
    })

    this.$nextTick(() => {
      this.changetype('week')
    })

    this.getPartnerNode()
    this.getNode()
    this.getPartner()
  },
  mounted() {
    // 初始化echart
    this.line = echarts.init(this.$refs.line)
    this.column = echarts.init(this.$refs.column)
    this.pie = echarts.init(this.$refs.pie)
  },
  methods: {
    // 点击 周 月 年
    async changetype(type) {
      this.istype = type
      if (type === 'month') {
        this.start = this.month.start
        this.end = this.month.end

        this.lineObj = await getTotalSales({
          ...this.monthTimeQ,
          collectType: 1
        })

        this.columnObj = await getSaleroom(this.monthTimeQ)
      } else if (type === 'year') {
        this.start = this.year.start.replace(/-/g, '.')
        this.end = this.year.end.replace(/-/g, '.')

        this.lineObj = await getTotalSales({ ...this.year, collectType: 2 })

        this.columnObj = await getSaleroom(this.year)
      } else {
        this.start = this.weeks.start.replace(/-/g, '.')
        this.end = this.weeks.end.replace(/-/g, '.')

        const data = await getTotalSales({ ...this.weeks, collectType: 1 })
        // console.log(data)

        this.lineObj = data

        switch (data.xAxis.length) {
          case 1:
            this.lineObj.xAxis = ['星期一']
            break
          case 2:
            this.lineObj.xAxis = ['星期一', '星期二']
            break
          case 3:
            this.lineObj.xAxis = ['星期一', '星期二', '星期三']
            break
          case 4:
            this.lineObj.xAxis = ['星期一', '星期二', '星期三', '星期四']
            break
          case 5:
            this.lineObj.xAxis = ['星期一', '星期二', '星期三', '星期四', '星期五']
            break
          case 6:
            this.lineObj.xAxis = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            break
          case 7:
            this.lineObj.xAxis = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            break
        }

        this.columnObj = await getSaleroom(this.weeks)
        // console.log(this.columnObj)
      }
    },
    // 获取当月日期，无具体时间
    async getMath() {
      const time = await getMonthnum()
      this.monthTimeQ = time

      this.month.start = time.start.replace(/-/g, '.')
      this.month.end = time.end.replace(/-/g, '.')
      // console.log(this.month)
    },

    // 获取当前周 无具体时间
    async getWeeks() {
      const time = await getCurrentTimeRange()
      this.weeks = time
      // console.log(time)
    },

    // 获取当前年 无具体时间
    async getYear() {
      const time = await getYearnum()
      this.year = time
      // console.log(time)
    },

    // 获取当月日期，有具体时间
    async getMathTime() {
      const time = await getMonth()
      this.monthTime = time
      // console.log(this.monthTime)
    },

    // 获取工单汇总信息  工单统计
    async getOrderInfo() {
      const data = await getTaskReportInfo(this.monthTime)
      data.forEach(item => {
        this.orderData.total += item.total
        // 完成数
        this.orderData.completedTotal += item.completedTotal
        // 进行中
        this.orderData.progressTotal += item.progressTotal || 0
        // 取消数
        this.orderData.cancelTotal += item.cancelTotal
      })
    },

    // 销售统计
    // 获取订单量
    async getOrderNum() {
      const num = await getOrderCount(this.monthTime)
      this.orderCount = num
    },

    // 获取销售额
    async getSellNum() {
      const num = await getOrderAmount(this.monthTime)
      this.sellCount = num / 100
    },

    //
    // 获取前十的商品列表
    async getGoodsList() {
      const data = await getTopTenList({ ...this.monthTimeQ, topValue: 10 })
      // console.log(data)
      this.goodsList = data
    },

    //
    // 获取合作商点位数 Top5
    async getPartnerNode() {
      const data = await getPartnerNode()
      // console.log(data)
      this.pieObj = data
    },
    // 获取点位数
    async getNode() {
      const num = await getNodeCount()
      this.nodeCount = num
    },
    // 获取合作商总数
    async getPartner() {
      const num = await getPartnerCount()
      this.partnerCount = num
    },
    // 去合作商管理
    toPartner() {
      this.$router.push('/point/cooperative')
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 500px;
  margin-top: 70px;
  display: flex;
  justify-content: space-evenly;
  .topleft {
    width: 70%;
    height: 100%;
    .left_up {
      width: 100%;
      height: 160px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .order {
        width: 56%;
        height: 100%;
        border-radius: 20px;
        padding-left: 20px;
        padding-top: 15px;
        background-color: #e9f3ff;
        .title {
          font-size: 16px;
          font-weight: 600;
          margin-right: 8px;
        }
        .time {
          font-size: 12px;
          color: #999;
        }
        .order_t {
          width: 100%;
          height: 100px;
          display: flex;
          .num {
            width: 25%;
            height: 100%;
            padding-top: 25px;
            .sum {
              font-size: 34px;
              font-weight: 600;
              color: #072074;
              text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
            }
            .sumName {
              font-size: 10px;
              color: #91a7dc;
            }
          }
        }
      }
      .sell {
        width: 41%;
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 15px;
        border-radius: 20px;
        background-color: #fbefe8;
        .title {
          font-size: 16px;
          font-weight: 600;
          margin-right: 8px;
        }
        .time {
          font-size: 12px;
          color: #999;
        }
        .sell_t {
          width: 100%;
          height: 100px;
          display: flex;
          .num {
            width: 50%;
            height: 100%;
            padding-top: 25px;
            padding-left: 10%;
            .sum {
              font-size: 34px;
              font-weight: 600;
              color: #ff5757;
              text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
            }
            .sumName {
              font-size: 10px;
              color: #de9690;
            }
          }
        }
      }
    }
    .left_under {
      width: 100%;
      height: 320px;
      border-radius: 20px;
      padding-top: 20px;
      background-color: #fff;
      .under_top {
        width: 100%;
        height: 40px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        .left {
          padding-top: 10px;
          .title {
            font-size: 16px;
            font-weight: 600;
            margin-right: 8px;
          }
          .time {
            font-size: 12px;
            color: #999;
          }
        }
        .right {
          .week-month-year {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
              Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
              Microsoft YaHei, Arial, sans-serif;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            width: 129px;
            height: 34px;
            background: rgba(233, 243, 255, 0.37);
            border-radius: 10px;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
          }
          .is-checked {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
              Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
              Microsoft YaHei, Arial, sans-serif;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            width: 37px;
            height: 25px;
            font-size: 14px;
            cursor: pointer;
            background: #fff;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
            border-radius: 7px;
            font-weight: 600;
            color: #333;
          }
          .item {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
              Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
              Microsoft YaHei, Arial, sans-serif;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            width: 37px;
            height: 25px;
            font-size: 14px;
            color: #9ca3b4;
            cursor: pointer;
          }
        }
      }
      .center {
        width: 100%;
        height: 260px;
        display: flex;
        justify-content: space-evenly;
        .broken_line {
          width: 51%;
          height: 260px;
        }
        .columnar {
          width: 45%;
          height: 260px;
        }
      }
    }
  }
  .topright {
    width: 25%;
    height: 100%;
    border-radius: 20px;
    background-color: #fff;
    .r_top {
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      .title {
        font-size: 16px;
        font-weight: 600;
        margin-right: 8px;
      }
      .time {
        font-size: 12px;
        color: #999;
      }
    }
    .product {
      width: 100%;
      height: 44px;
      padding-left: 20px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      .logo {
        width: 18px;
        height: 20px;
        text-align: center;
        font-size: 12px;
        margin-right: 14px;
        color: #878686;
        background-image: url('../../assets/top/top4.png');
        background-size: contain;
      }
      .name {
        font-size: 14px;
        width: 65%;
        color: #333;
      }
      .number {
        font-size: 14px;
        color: #808294;
      }
    }
  }
}
.bottom {
  width: 100%;
  height: 300px;
  margin: 20px 0;
  display: flex;
  justify-content: space-evenly;
  .bottom_left {
    width: 55%;
    height: 100%;
    border-radius: 20px;
    background-color: #fff;
    .left_top {
      width: 100%;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      .title {
        font-size: 16px;
        font-weight: 600;
        margin-right: 70%;
      }
      .more {
        width: 18px;
        height: 14px;
        font-size: 12px;
        font-weight: 600;
        color: #5f84ff;
        border-radius: 50%;
        border: 1px solid #5f84ff;
      }
    }
    .left_under {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: space-evenly;
      .pie {
        width: 60%;
        height: 100%;
      }
      .sum_up {
        width: 25%;
        height: 80%;
        margin-top: 3%;
        padding-top: 40px;
        padding-left: 30px;
        background-color: #f8f8f9;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        .sum {
          font-size: 24px;
          font-weight: 600;
          // margin-top:20px;
          color: #072074;
        }
        .sumName {
          font-size: 12px;
          color: #000412;
        }
      }
    }
  }
  .bottom_right {
    width: 40%;
    height: 100%;
    border-radius: 20px;
    background-color: #fff;
    .right_top {
      width: 100%;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      .title {
        font-size: 16px;
        font-weight: 600;
        margin-right: 70%;
      }
      .more {
        width: 18px;
        height: 14px;
        font-size: 12px;
        font-weight: 600;
        color: #5f84ff;
        border-radius: 50%;
        border: 1px solid #5f84ff;
      }
    }
    .picture {
      padding-top: 40px;
      text-align: center;
      font-size: 14px;
      color: #20232a;
      img {
        width: 120px;
        height: 96px;
      }
    }
  }
}
</style>
